<template>
  <div>
    <Row>
      <i-col span="24" class="operation_item y_query_right">
        <Input v-model.trim="tParam.userEmail" style="min-width: 180px;" placeholder="请输入邮箱" clearable class="y_condition"></Input>
        <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>
        <Button type="primary" icon="md-add" @click="add()" v-has=tRole.EMAIL_3_101 class="y_condition">新增</Button>
      </i-col>
    </Row>

    <br/>
    <!--表格和分页-->
    <Table stripe border :context="this" :columns="tTable" :data="tData.blacklist" class="table_css" no-data-text="暂无数据"></Table>
    <br/>
    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[20,40,60,100]"
            show-sizer show-elevator/>
    </div>

    <!--删除确认弹出框-->
    <Modal
      v-model="tStatus.modalDelete.isShow"
      title="确认删除"
      :loading="tStatus.modalDelete.isLoading"
      @on-ok="deleteItem">
      <p>确认将该{{tStatus.modalDelete.title}}移除黑名单吗</p>
    </Modal>

    <!--新用黑名单-->
    <Modal
      v-model="tStatus.modalAdd.isShow"
      title="添加黑名单"
      :closable="false"
      :mask-closable="false"
      :loading="tStatus.modalAdd.isLoading"
      @on-ok="handleSubmit('formValidate')">
        <Form ref="formValidate" :model="tData.email" :rules="tStatus.ruleValidate" :label-width="80">
          <FormItem label="拉黑原因" prop="reason">
            <Select v-model="tData.email.reason" filterable multiple allow-create @on-create="">
              <Option v-for="item in tData.tagList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="类型" >
            <RadioGroup v-model="tData.email.label" @on-change="radioChange">
              <Radio label="邮箱"></Radio>
              <Radio label="域名"></Radio>
            </RadioGroup>
          </FormItem>
          <FormItem v-if="!isDomain"  label="邮箱" prop="userEmail">
            <Input v-model.trim="tData.email.userEmail" placeholder="请输入邮箱,例如abc@163.com"></Input>
          </FormItem>
          <FormItem v-if="isDomain"  label="域名" prop="domain">
            <Input v-if="isDomain" v-model.trim="tData.email.domain" placeholder="请输入域名,例如163.com"></Input>
          </FormItem>
        </Form>
    </Modal>
  </div>
</template>

<script>
import tiyData from "./js/blacklist/black_data";
import {webList,deleted,webDelete,addItem} from "./js/blacklist/black_fun";


export default {
  data() {
    return {
      tRole: {
        EMAIL_3_101: "EMAIL-3-101"
      },
      page: tiyData.tPage,
      tParam: tiyData.tParam,
      tData: tiyData.tData,
      tTable:tiyData.tTable(this),
      tStatus:tiyData.tStatus,
      isDomain:false,
    }
  },

  methods:{
    search() {
      webList(this, tiyData);
    },
    changePage(page) {
      tiyData.tPage.currentPage = page;
      webList(this, tiyData);
    },
    sizeChange(page) {
      tiyData.tPage.stepNumber = page;
      webList(this, tiyData);
    },
    deleteAction(index) {
      deleted(this, tiyData, index);
    },
    deleteItem(){
      webDelete(this, tiyData);
    },
    add(){
      this.tData.email.userEmail="";
      this.tData.email.domain="";
      this.tData.email.type=1;
      this.tData.email.label='邮箱';
      this.tData.email.reason.splice(0,this.tData.email.reason.length);
      this.isDomain=false;
      this.tStatus.modalAdd.isShow=true;
    },
    handleSubmit(name){
      addItem(this,tiyData,name)
    },
    radioChange(value){
      if(value=="域名"){
        this.tData.email.type=2;
        this.isDomain=true;
      }
      if(value=="邮箱"){
        this.tData.email.type=1;
        this.isDomain=false;
      }
    },
  }
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base";

.list_value {
  font-size: 13px;
  color: @tiyTextDescColor;
  padding-right: 1rem;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
